<template>
  <div class="page">
    <el-table
      :data="tableData"
      border
      style="
        width: 80%;
        margin: 60px auto;
        current-row-key
      "
    >
      <el-table-column prop="name" label="科目名称" width="180">
      </el-table-column>
      <el-table-column prop="score" label="分值" width="180"> </el-table-column>
      <el-table-column prop="pass" label="及格线"> </el-table-column>
      <el-table-column prop="full" label="满分线"> </el-table-column>
      <el-table-column label="操作" v-if="type === '1'">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <editGradeDialog
      ref="editGrade"
      :formLabelAlign="dataInfo"
      @editGrade="editGrade"
    />
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import editGradeDialog from "../components/editGradeDialog";
export default {
  components: {
    editGradeDialog,
  },
  data() {
    return {
      tableData: [
        {
          name: "男子1000米/女子800米",
          score: 30,
          pass: "4分30秒",
          full: "3分20秒",
        },
        {
          name: "肺活量",
          score: 10,
          pass: "3600",
          full: "4600",
        },
        {
          name: "坐位体前屈",
          score: 10,
          pass: "12",
          full: "20",
        },
        {
          name: "50米短跑",
          score: 20,
          pass: "7秒2",
          full: "6秒5",
        },
        {
          name: "立定跳远",
          score: 20,
          pass: "2.1米",
          full: "2.45米",
        },
        {
          name: "引体向上/仰卧起坐",
          score: 10,
          pass: "12/60",
          full: "18/70",
        },
      ],
      dataInfo: {},
    };
  },
  computed: mapState({
    type(state) {
      return state.app.type;
    },
  }),
  created() {
    console.log(this.$route.name);
    this.getGrade();
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.dataInfo = row;
      this.$refs.editGrade.openDialog();
    },
    getGrade() {
      axios.post("/api/user/selectGrade", {}).then((res) => {
        console.log(res);
        this.tableData = res.data;
      });
    },
    editGrade(e) {
      this.tableData = e;
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  width: calc(100% - 246px);
  //   height: calc(100% - 60px);
  height: 100%;
  margin-left: 6px;
  height: 100%;
  background: url(~@/assets/images/矩形1拷贝3.png) no-repeat;
  background-size: 110% 100%;
  background-position: 80% 110%;
}
.page /deep/ .el-table,
.el-table__expanded-cell {
  background: transparent;
  color: black;
}
.page /deep/ .el-table__header-wrapper {
  background: transparent;
}
.page /deep/ .el-table th {
  font-size: 18px;
  background: transparent;
}
.page /deep/ .el-table tr {
  background: transparent !important;
}
.page /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background: transparent;
}
</style>
